<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.1</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/js/cookie.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so layui-form-pane">
            <div class="demoTable">
                <input type="text" class="layui-input" placeholder="请输入房间类型名称" name="roomType" id="roomType"
                       autocomplete="off"
                       lay-verify="required">
                <button type="button" class="layui-btn add" lay-submit="" lay-filter="add" data-type="add"><i
                        class="layui-icon"></i>增加
                </button>
                <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
                   href="javascript:location.replace(location.href);" title="刷新">
                    <i class="layui-icon" style="line-height:30px">刷新</i></a>
            </div>

        </form>

    </div>

    <table class="layui-hide" id="test" lay-filter="test"></table>

</div>

<!--编辑页面,id和渲染的table进行了区分-->
<div class="layui-row" id="popUpdateTest" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" id="update" action="" style="margin-top:20px">

            <input type="hidden" name="id" id="idE" autocomplete="off">

            <div class="layui-form-item">
                <label class="layui-form-label">房间类型名称</label>
                <div class="layui-input-block">
                    <input type="text" name="roomType" id="roomTypeE" required lay-verify="required" autocomplete="off"
                           placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">当前空房数量</label>
                <div class="layui-input-block">
                    <input type="number" name="emptyNum" id="emptyNumE" required lay-verify="required|number"
                           autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input type="text" name="remark" id="remarkE" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="update">确认修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>


<script>
    layui.use(['form', 'jquery', 'table'], function () {
        var $ = layui.$,
            form = layui.form,
            table = layui.table;
        var tableIns = table.render({
            id: 'testId'
            , elem: '#test'
            , url: '/roomType/list'
            // , page: false
            , toolbar: '#toolbarDemo'
            , page: true
            , parseData: function (res) { //res 即为原始返回的数据

                return {
                    "code": res.status, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
            , cols: [ [{type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', sort: true, unresize: true}
                , {field: 'roomType', title: '房间类型', sort: true, unresize: true}
                , {field: 'emptyNum', title: '当前空房数量', sort: true, unresize: true}
                , {field: 'remark', title: '描述', sort: true, unresize: true}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', unresize: true}
            ] ]

        });

        /*增加按钮*/
        form.on('submit(add)', function (data) {
            var data = $('#roomType').serialize();
            $.ajax({
                type: "post",
                url: '/roomType/add',
                data: data,
                success: function (data) {
                    if (data.status == 0) {
                        layer.alert("插入成功", {icon: 6}, function (index) {
                            $('#roomType').val("");
                            layer.close(index);
                            tableIns.reload();
                        });
                    } else {
                        layer.alert("插入失败，请重新操作", {icon: 5}, function (index) {
                            layer.close(index);
                        });
                    }
                },
                error: function (data) {
                    layer.alert("服务器发送错误，请联系管理人员", {icon: 5}, function (index) {
                        layer.close(index);
                    });
                }
            })
            return false;

        })


        /*每行操作按钮*/
        table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            console.log(data);
            if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    //   var checkStatus = table.checkStatus('#test'); //idTest 即为基础参数 id 对应的值
                    $.post("/roomType/remove", {'ids': data.id}, function (res) {

                        if (res.status == 0) {
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.alert("删除成功", {icon: 6})
                        } else {

                            layer.alert("删除失败", {icon: 5})
                        }
                    });
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') { //编辑
                //do something
                // var url='/roomType/edit';
                var w = ($(window).width() * 0.9);
                var h = ($(window).height() - 50);
                layer.open({
                    type: 1,
                    area: [w + 'px', h + 'px'],
                    fix: false, //不固定
                    maxmin: true,
                    shadeClose: true,
                    shade: 0.4,
                    title: "编辑",
                    content: $("#popUpdateTest"),
                    success: function () {
                        $('#roomTypeE').val(data.roomType);
                        $('#emptyNumE').val(data.emptyNum);
                        $('#remarkE').val(data.remark);
                        $('#idE').val(data.id);
                    }
                });
                setFormValue()

            }
        });


        function setFormValue() {
            form.on('submit(update)', function () {
                $.ajax({
                    url: '/roomType/edit',
                    type: 'POST',
                    data: $('#update').serialize(),
                    success: function (res) {
                        if (res.status == 0) {
                            layer.closeAll('loading');
                            layer.load(2);
                            layer.msg("修改成功", {icon: 6});
                            //   layer.closeAll();//关闭所有的弹出层
                            tableIns.reload();
                        } else {
                            layer.msg("修改失败", {icon: 5});
                        }
                    }
                })
            })

        }

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'delAll':
                    layer.confirm('真的删除行么', function (index) {
                        var arr = [];
                        var data = checkStatus.data;
                        $.each(data, function (idx, obj) {
                            arr.push(obj.id);
                        });
                        //发异步
                        $.post("/roomType/remove", {'ids': arr.toString()}, function (res) {
                            if (res.status == 0) {
                                tableIns.reload();
                            } else {
                                layer.alert("修改失败", {icon: 5})
                            }
                        });
                        layer.close(index);
                    })

                    break;
            }
            ;

        });


    });
    /*end use*/


</script>

<!--操作-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!--头部工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger" lay-event="delAll"><i class="layui-icon"></i>批量删除</button>

    </div>
</script>
</body>
</html>


<!--
    /*
        layui.$(document).ready(function () {
            var $ = layui.jquery;

            //房间类型表格获取数据
            $.get('/admin/package', function (res) {
                var obj = JSON.parse(res);//转换json数据为js对象
                //console.log(obj);
                console.log(res);
                //方法--成功接收数据调用方法把数据对应放到单元格里面
                roomType_data(obj);
            })

            //把数据放到表格单元格的方法
            function roomType_data(obj) {
                var data = obj.roomTYPE;//拿到客房类型对象的表格数据
                var s = "";
                for (var i = 0; i < data.length; i++) {
                    s = " <tr><td>" + " <div class=\"layui-unselect layui-form-checkbox \" lay-skin=\"primary\" data-id='2'><i class=\"layui-icon\">&#xe605;</i></div>" + "</td>";
                    s = s + "<td  name=\"id\">" + data[i].id + "</td><td name=\"roomType\">" + data[i].roomType + "</td><td name=\"emptyNum\">" + data[i].emptyNum + "</td><td name=\"remark\">" + data[i].remark + "</td>";
                    s = s + ("<td class=\"tbManage\">" + "<button class=\"layui-btn layui-btn layui-btn-xs roomTypeEdit\" ><i class=\"layui-icon\">&#xe642;</i>编辑</button>" +
                        " <button class=\"layui-btn layui-btn-warm layui-btn-xs\"  onclick=\"roomNumManage()\" ><i class=\"layui-icon\">&#xe642;</i>增减客房</button>" +
                        " <button class=\"layui-btn-danger layui-btn layui-btn-xs\"  onclick=\"roomTypeDel(this,'要删除的id')\" href=\"javascript:;\" ><i class=\"layui-icon\">&#xe640;</i>删除</button>" +
                        " </td></tr>")
                    $("#roomTypeTB").append(s);
                }
            }

            //利用委托事件（父或祖级元素必须是原来文档渲染时就生成的） 使编辑信息弹窗有对应信息显示  每个编辑按钮加一个roomtypeedit类
            $("#roomTypeTB").on("click", ".roomTypeEdit", function () {

                var type = ($(this).parent().parent().children().eq(2).text());
                var introdution = ($(this).parent().parent().children().eq(4).text());

                var index = layui.layer.open({
                    title: "编辑信息",
                    type: 2,
                    content: '/admin/roomTypeInfo',
                    fix: false,
                    maxmin: true,
                    shadeClose: true,
                    shade: 0.4,
                    area: ['500px', '300px'],
                    success: function (layero, index) {
                        var body = layui.layer.getChildFrame('body', index);
                        body.find(".type").val(type);
                        body.find(".introduction").val(introdution);
                    }
                })
            });


        })/!*end ready*!/*/
-->